<template>
	<view style="background: #f7f6f6">
		<view class="box"  style="background: #f7f6f6">

			<view class="search_box">
				<view class="flex_box aic">
					<view class="re mr20" @tap="back">
						<image :lazy-load="true" src="/static/icon_arrow_1.png" class="vt img6"></image>
					</view>
					<view class="re item">
						<input type="text" class="ipt_search" v-model="title" @confirm="searchConfirm()"
							placeholder="请输入您想搜索的职位" placeholder-style="color: #353535" />
					</view>
					<view class="pl20 fs26 cor_333" @tap="searchTitle">搜索</view>
					<view class="pl20 df fs26 cor_333" @click="screenShow();">
						<view>筛选</view>
						<image :lazy-load="true" src="/static/icon_screen.png" class="ml5 img7"></image>
					</view>
				</view>
			</view>

			<view class="menu_content_box_page" v-if="recruitList.length > 0" >
				<view class="pa15">
					<view class="mt15 area_block_1" v-for="item, index in recruitList" :key="index"
						@tap="toDetail(item.id)">
						<view class="flex_box aic">
							<view class="item ov">
								<view class="re mr25 fs32 lh44 clamp_2">{{item.title}}</view>
							</view>
							<view class="fs30 fwb cor_F23"><text class="fs32">￥{{item.salary}}</text>/小时</view>
						</view>
						<view class="mt25 flex_box aic">
							<view class="df aic">
								<image :lazy-load="true" src="/static/icon_location.png" class="vt img3"></image>
								<view class="ml5 fs26 cor_808">{{item.place}}</view>
							</view>
							<view class="item tar fs28">{{item.date}}</view>
						</view>

					</view>
				</view>

				<view v-if="recruitList.length == 0" style="width: 100%;height: 100vh;">
					<view style="height: 200rpx;"></view>
					<image :lazy-load="true" src="../../static/excavator.png" style="width: 100%; padding: 100rpx 200rpx;">
					</image>
					<view style="width: 100%;text-align: center;color: #808080;">暂无数据</view>
				</view>

				<!-- 筛选弹窗 -->


				<view class="screen_bomb_fix" :class="screenFlag ? 'show' : ''">
					<view class="screen_popup_box">
						<view class="screen_content">
							<view class="ml5 fs28 fwb cor_5D5">筛选</view>
							<!-- 拖车类型 -->
							<view class="mt30">
								<view class="ml5 fs26 cor_5D5">挖机类型</view>
								<view class="unlimited_box" @tap="typeId=0" :class="{'active':0== typeId}">不限</view>
								<view class="df fldr fw">
									<view class="type_tab" :class="{'active':item.id== typeId}"
										v-for="item,index in types" :key="index" @tap="typeCheck(item)">
										{{item.name}}
									</view>
								</view>
							</view>
							<!-- 挖机类型 -->

							<!-- 价格区间 -->
							<view class="mt30">
								<view class="ml5 fs26 cor_5D5">价格区间</view>
								<view class="unlimited_box" @tap="startSalary='',endSalary=''"
									:class="{'active':''== startSalary && ''== endSalary}">不限</view>
								<view class="mt30 df fldr fw aic">
									<view class="w157"><input type="text" class="price_range_ipt" v-model="startSalary"
											@confirm="minConfirm" @blur="minBlur" placeholder="最低价格"
											placeholder-style="color: #bebebe"></view>
									<view class="ml10 fs26 cor_5D5" style="font-weight: 500;">万</view>
									<view class="ml15 mr15 hor_line_1"></view>
									<view class="w157"><input type="text" class="price_range_ipt" v-model="endSalary"
											@confirm="maxConfirm" @blur="maxBlur" placeholder="最高价格"
											placeholder-style="color: #bebebe"></view>
									<view class="ml10 fs26 cor_5D5" style="font-weight: 500;">万</view>
								</view>
							</view><!-- 价格区间 -->

							<!-- 拖车吨位 -->
							<view class="mt30">
								<view class="ml5 fs26 cor_5D5">拖车吨位</view>
								<view class="unlimited_box" @tap="weightId=0" :class="{'active':0== weightId}">不限
								</view>
								<view class="df fldr fw">
									<view class="type_tab_max" :class="{'active':item.id== weightId}"
										v-for="item, index in weights" :key="index" @tap="weightCheck(item)">
										<view class="">{{item.name}}</view>
										<!-- <view class="mt20">6吨以下</view> -->
									</view>

								</view>
							</view><!-- 拖车吨位 -->



							<!-- 区域 -->
							<view class="mt30">
								<view class="ml5 fs26 cor_5D5">区域</view>
								<view class="unlimited_box" :class="cityId == 0 ? 'active' : ''"
									@tap="cityId=0,cityName=''">不限</view>
								<view class="df fldr fw" v-if="cityId">
									<view class="active type_tab">{{cityName}}</view>
								</view>
							</view>
							<!-- 区域 -->

							<!-- 搜索 -->
							<view class="mt35">
								<view class="re">
									<input type="text" class="ipt_search_screen" placeholder="输入城市名"
										placeholder-style="color: #adadad;" v-model="citySearch"
										@confirm="citySearchConfirm" @input="citySearchConfirm">
									<image :lazy-load="true" src="/static/icon_search.png" class="icon_search_pos_screen"
										@tap="citySearchConfirm"></image>
								</view>
								<view class="mt20 region_box_sty">
									<!-- A -->
									<view v-for="item,index in AlphaCitys" :key="index"
										v-if="citySearchList.length == 0">
										<view class="pl15 pr15 h62 df aic cor_ada scaley_1">{{item.head}}</view>
										<view class="pl15 pr15 h62 df aic scaley_1" v-for="foo,bar in item.list" :key="bar" @tap="chooseCity(foo)">
											{{foo.name}}
										</view>
									</view>
									<!-- A -->

									<view>
										<view class="pl15 pr15 h62 df aic scaley_1" v-for="j,k in citySearchList" :key="k"
											v-if="citySearchList.length > 0" @tap="chooseCity(j)">
											{{j.name}}
										</view>
									</view>
								</view>
							</view>
							<!-- 搜索 -->
						</view>
						<!-- 按钮 -->
						<view class="screen_bottom_area aic jcc">
							<view class="reset_btn" @tap="clearSearch">重置</view>
							<view class="ml50 determine_btn" @click="searchConfirm()">确定</view>
						</view><!-- 按钮 -->
					</view>
					<view class="mask_bg" @click="screenHide();"></view>
				</view>

			</view><!-- box -->
		</view>
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getPageRecruitApi,
		getRecruitFilterApi,
		searchCityListApi,
		getInitalCityApi,
		getUserInfoApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				screenFlag: false, //false代表筛选弹窗关闭着
				recruit: [],
				recruitFilter: [],
				pageIndex: 1,
				pageSize: 10,
				title: '',
				typeId: 0,
				cityId: 0,
				cityName: '',
				citySearch: '',
				weightId: 0,
				startSalary: '',
				endSalary: '',
				recruitList: [],
				weights: [],
				types: [],
				cities: [],
				AlphaCitys: [],
				citySearchList: []
			}
		},
		onShow() {
			if (!uni.getStorageSync('userId')) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
			this.getUserInfo();
		},
		onLoad() {
			let that = this;
			this.getPageRecruit();
			this.getRecruitFilter();
			setTimeout(function() {
				that.getInitalCity();
			}, 1500);
		},
		onBackPress(options) {
		    uni.switchTab({
		    	url: '/pages/personal_center/personal_center'
		    })
			return true;
		},
		methods: {
			getUserInfo() {
				let that = this;
				getUserInfoApi({
					userId: uni.getStorageSync('userId')
				}).then(res => {
					if (!res.data.beCompleteInfo) {
						uni.navigateTo({
							url: '/pages/personal_information/personal_information'
						})
					}
				}).catch(err => {})
			},

			clearSearch() {
				this.pageIndex = 0;
				this.pageSize = 10;
				this.title = '';
				this.typeId = 0;
				this.startSalary = 0;
				this.endSalary = 0;
				this.weightId = 0;
				this.cityId = 0;
				this.cityName = '';
				this.citySearch = '';
				this.citySearchList = [];
			},
			getInitalCity() {
				getInitalCityApi({

				}).then(res => {
					this.AlphaCitys = res.data
					console.log(res);
				}).catch(err => {

				})
			},
			citySearchConfirm(e) {
				this.citySearch = e.detail.value;
				if (this.citySearch) {
					showLoading('加载中');
					searchCityListApi({
						name: this.citySearch
					}).then(res => {
						this.citySearchList = res.data;
						hideLoading();
					}).catch(err => {
						hideLoading();
					})
				} else {
					this.citySearchList = [];
				}
			},
			//选择城市
			chooseCity(city) {
				let that = this;
				this.cityId = city.code;
				this.cityName = city.name;
			},

			getPageRecruit() {
				let that = this;
				showLoading('加载中');
				getPageRecruitApi({
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					title: this.title,
					typeId: this.typeId,
					weightId: this.weightId,
					cityId: this.cityId ? this.cityId : 0,
					startSalary: this.startSalary == '' ? 0 : this.startSalary,
					endSalary: this.endSalary == '' ? 0 : this.endSalary,
				}).then(res => {
					that.pageIndex = res.data.currentPage;
					if (that.pageIndex == 1) {
						that.recruitList = res.data.data;
					} else {
						for (let i in res.data.data) {
							that.recruitList.push(res.data.data[i])
						}
					}
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},

			getRecruitFilter() {
				getRecruitFilterApi({

				}).then(res => {
					this.weights = res.data.weights;
					this.types = res.data.types;
					this.cities = res.data.cities;
				}).catch(err => {
					toast(err.msg);
				})
			},

			weightCheck(item) {
				this.weightId = item.id;
			},

			typeCheck(item) {
				this.typeId = item.id;
			},

			minConfirm(e) {
				this.startSalary = e.detail.value;
			},

			minBlur(e) {
				this.startSalary = e.detail.value;
			},

			maxConfirm(e) {
				this.endSalary = e.detail.value;
			},

			maxBlur(e) {
				this.endSalary = e.detail.value;
			},
			searchConfirm() {
				this.screenHide();
				this.getPageRecruit();
			},
			searchTitle() {
				this.getPageRecruit();
			},

			back() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},

			toDetail(id) {
				uni.navigateTo({
					url: '/pages/recruitment_details/recruitment_details?id=' + id
				})
			},

			screenShow: function() { //筛选弹窗-打开
				this.screenFlag = true
			},
			screenHide: function() { //筛选弹窗-关闭
				this.screenFlag = false
			},
		}
	}
</script>

<style>
	page { background: #f7f6f6 }
	.menu_content_box_page {
		position: relative;
		/* height: calc(100vh - 177rpx); */
		background-color: #f7f6f6;
		padding-top: 177rpx;
	}

	.search_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 85rpx 24rpx 25rpx;
		background-color: #fff;
		z-index: 3;
	}

	.ipt_search {
		display: inline-block;
		width: 100%;
		padding: 0 20rpx;
		height: 69rpx;
		line-height: 69rpx;
		font-size: 26rpx;
		text-align: left;
		color: #000;
		background-color: #F4F2F2;
		outline: none;
		border: none;
		vertical-align: top;
		border-radius: 35rpx;
	}

	.icon_search_pos {
		position: absolute;
		top: 21rpx;
		left: 46rpx;
		width: 28rpx;
		height: 28rpx;
		z-index: 2;
	}

	.area_block_1 {
		position: relative;
		padding: 32rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.watermark_img_pos {
		position: absolute;
		top: 86rpx;
		right: 20rpx;
		width: 92rpx;
		height: 92rpx;
		z-index: 2;
	}

	.delete_btn {
		display: inline-block;
		width: 125rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		background-image: linear-gradient(90deg, #f46933, #e3140b);
		border-radius: 40rpx;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}
</style>
